<script setup lang="ts">
import { expertLogin } from "@/services/loginApi.ts";
import { nextTick, reactive, ref } from "vue";
import type { ExpertLoginBodyType } from "@/types/loginType.ts";
import type { FormRule } from "@/types/commonType.ts";
import { FormInstance, ValidatedError } from "@arco-design/web-vue";
import Local from "@/utils/local";
import { useRouter } from "vue-router";
import useScoreStore from "@/stores/modules/useScoreStore.ts";

const router = useRouter();

const { setScore } = useScoreStore();

const formRef = ref<FormInstance>();

const loading = ref<boolean>(false);

const loginData = reactive<ExpertLoginBodyType>({
  name: "",
  pwd: "",
});

const rules: FormRule<keyof ExpertLoginBodyType> = {
  name: [
    {
      required: true,
      message: "请输入账号",
    },
  ],
  pwd: [
    {
      required: true,
      message: "请输入密码",
    },
  ],
};

const handleLogin = () => {
  loading.value = true;
  formRef.value
    ?.validate()
    .then((v: undefined | Record<string, ValidatedError>) => {
      if (!v) {
        expertLogin(loginData)
          .then((res) => {
            if (res.code === 200) {
              Local.localSave("token", res.data.token);
              Local.localSave("teacher", JSON.stringify(res.data));
              Local.localSave("moduleId", res.data.moduleId);
              setScore({});
              nextTick(() => {
                router.push({
                  path: "/expertReview",
                });
              });
            }
          })
          .finally(() => {
            loading.value = false;
          });
      } else {
        loading.value = false;
      }
    });
};
</script>

<template>
  <a-spin
    dot
    :loading="loading"
  >
    <div class="expert-login">
      <div class="login-form">
        <h2 class="form-title">专家登录</h2>
        <a-form
          ref="formRef"
          :model="loginData"
          layout="vertical"
          scroll-to-first-error
          :rules="rules"
        >
          <a-form-item
            show-colon
            label="用户名"
            field="name"
            validate-trigger="blur"
          >
            <a-input
              allow-clear
              v-model="loginData.name"
              placeholder="请输入账号"
            />
          </a-form-item>
          <a-form-item
            label="密码"
            show-colon
            field="pwd"
            validate-trigger="blur"
          >
            <a-input-password
              allow-clear
              v-model="loginData.pwd"
              placeholder="请输入密码"
            />
          </a-form-item>
        </a-form>
        <a-button
          type="primary"
          long
          @click="handleLogin"
          class="login-btn"
        >登录</a-button>
      </div>
    </div>
  </a-spin>
</template>

<style scoped lang="scss">
.expert-login {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  // background: #f5f5f5;
  background-image: url("@/assets/login/teacher.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.login-form {
  width: 100%;
  max-width: 400px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  .form-title {
    text-align: center;
    font-size: 24px;
    color: #333;
  }

  .form-group {
    margin-bottom: 15px;

    label {
      display: block;
      font-size: 14px;
      margin-bottom: 5px;
      color: #555;
    }

    input {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;

      &:focus {
        border-color: #409eff; /* 主色调 */
        outline: none;
      }
    }
  }

  .login-btn {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background: #409eff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    // transition: background-color 0.3s ease;
    margin: 10px 0px;
    &:hover {
      background: #66b1ff;
    }
  }
}
</style>